Vue.component("conveyer-ani", {
  props: {
    redPoint: {
      type: Array,
      default: () => []
    },
    percent: {
      type: Number,
      default: 0
    },
    pause: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pointList: [],
      startX: 0,
      startY: 25,
      endX: 0,
      endY: 0,
      duration: 30,
      svgEle: null,
      motionEle: null,
    }
  },
  watch: {
    redPoint: {
      handler(newValue, oldValue) {
        this.drawRedPoint();
      },
      deep: true
    },
    percent:{
      handler(newValue, oldValue) {
        this.moveToProgress(newValue);
      }
    },
    pause:{
      handler(newValue, oldValue) {
        newValue && this.pause();
        !newValue && this.start();
      }
    }
  },
  computed: {
    // 计算路径点位
    pathStr() {
      let pathStr = '';
      this.pointList.map((item, index) => {
        if (index === 0) {
          pathStr += `M ${item[0]} ${item[1]}`;
        } else {
          pathStr += ` L ${item[0]} ${item[1]}`;
        }
      })
      return pathStr;
    }
  },
  template: `
    <div class="box">
      <div class="shape">
        <div class="conveyer">
          <div class="conveyer-content">
            <div class="conveyer-stone"></div>
          </div>
        </div>
      </div>
      <div class="shape"></div>
      <svg id="path-svg" class="path" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <path id="conveyerPath" :d="pathStr" stroke="transparent" stroke-width="3" fill="transparent" />
          <g id="myMachine">
            <circle  cx="20" cy="0" r="15" fill="#bebebe"/>
            <rect  width="40" height="40"  fill="#030303"/>
          </g>
          <g d="myMachine1">
            <path d="M864.768 126.976h-537.6c-7.168 0-14.336 2.56-19.968 6.656L140.288 265.216c-7.68 6.144-12.288 15.36-12.288 25.088v573.44c0 17.92 14.336 31.744 32.256 31.744h573.44c8.704 0 16.896-3.584 22.528-9.216l131.584-131.584c6.144-6.144 9.216-14.336 9.216-22.528V158.72c0-17.408-14.336-31.744-32.256-31.744zM338.432 190.976h449.536l-67.584 67.584H252.416l86.016-67.584zM701.44 832H192V322.56H701.44v509.44z m64-45.056V303.616l67.584-67.584v482.816l-67.584 68.096z" fill="#2c2c2c" p-id="33148"></path>
          </g>
          <g id="red-point">
            <circle cx="20" cy="30" r="20" fill="red" />
            <text x="30" y="30" fill="red" font-size="30"></text>
          </g>
        </defs>
        <g id="red-point-box">
        </g>
        <use xlink:href="#myMachine">
          <animateMotion id="path-svg-motion" :dur="duration +'s'" repeatCount="indefinite">
            <mpath href="#conveyerPath" />
          </animateMotion>
        </use>
      </svg>
    </div>
  `,
  mounted() {
    this.initPath();
    this.svgEle = document.querySelector('#path-svg');
    this.motionEle = document.querySelector('#path-svg-motion');
    this.redPointBox = document.querySelector('#red-point-box');
    this.drawRedPoint();
  },
  methods: {
    // 初始化路径
    initPath() {
      const pointList = [];
      const line_1 = this.countPath(1);
      const line_2 = this.countPath(2);
      console.log('line_2', line_2)
      const line_3 = this.countPath(3);
      pointList.push(...line_1, ...line_2, ...line_3);
      // pointList.push(...line_2);
      this.pointList = pointList;
    },
    // 计算点位
    countPath(type) {
      const _pointCount = 45;
      const h = 300;
      const w = 900;
      const bw = 50;
      const maxX = w + bw / 2;
      const straightW = w * 0.8;
      const _perCount = straightW / _pointCount;
      const startX = this.startX;
      const startY = this.startY;
      const endX = startX;
      const endY = h + bw * 2;
      console.log('endY', endY)
      const middleY = (endY - startY) / 2;
      switch (type) {
        case 1:
          return new Array(_pointCount)
            .fill(0)
            .map((_, index) => {
              return [startX + (index + 1) * _perCount, startY];
            })
        case 2:
          const _diffX = (maxX - straightW) / 3;
          const _diffY = middleY / 5;
          const _arr = new Array(5).fill(0).map((_, index) => {
            const _count = index + 1;
            const _nextX = straightW + _count * _diffX;
            return [_nextX > maxX ? maxX : _nextX, startY + _count * _diffY];
          })
          return [
            ..._arr,
            ..._arr
              .reverse()
              .map((subItem, subIndex) => {
                const _subCount = subIndex + 1;
                return [subItem[0], _arr[0][1] + _subCount * _diffY];
              })]
        case 3:
          return new Array(_pointCount)
            .fill(0)
            .map((_, index) => {
              return [endX + (index + 1) * _perCount, endY];
            })
            .reverse()
      }
    },
    // 绘制红点
    drawRedPoint() {
      this.redPointBox.innerHTML = '';
      this.redPoint.map((item, index) => {
        console.log('item', item);
        const _pointIndex = item.percent - 1;
        const r = 20;
        const x = this.pointList[_pointIndex][0] + r / 2;
        const y = this.pointList[_pointIndex][1] + r / 2;
        const gEle = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        gEle.innerHTML = `
          <circle cx="${x}" cy="${y}" r="${r}" fill="red" />
          <text x="${x + r}" y="${y + r / 2}" fill="red" font-size="${r + 10}">${item.text}</text>
        `
        this.redPointBox.appendChild(gEle);
      })
    },
    start() {
      this.moveToProgress(this.percent);
    },
    pause() {
      this.motionEle.endElement();
      this.moveToProgress(this.percent);
    },
    moveToProgress(progress) {
      const duration = this.motionEle.getAttribute("dur") || 0;
      const currentTime = progress * duration;
      this.motionEle.setCurrentTime(currentTime);
    }
  }
});